<template>
	
	<div  class="rubriclist">
		<el-row>
		  	<el-col :span="8" id="rubric-list">
		  		<h3>Rubric List</h3>
		  		<div class="rubric-list"  v-for="item in rubriclist">
		  			<ul>
		  				<li @click="selectRubric(item.id,item.title)">{{item.title}}</li>
		  			</ul>
		  		</div>
		  	</el-col>
		  	<el-col :span="16" >
		  		<div class="current-rubric" v-if="!isEditRubric">
		  			<h3>{{currentRubric.title}}</h3>
		  			<template>
					  	<el-table :data="currentRubric.items" border stripe style="width:100%">
		  		    		<el-table-column prop="name" label="Title"></el-table-column>
		  		    		<el-table-column prop="percent" label="Percentage"></el-table-column>
		  		    	</el-table>
		  		    </template>
	  		    	<div class="actions">
						<el-button type="primary" icon="edit" class="add-content"  @click="editCurrentRubric()"></el-button>

						<el-button type="danger" icon="delete" class="remove-content" @click="removeCurrentRubric(currentRubric.rubricId)"></el-button>
	  		    	</div>
		  		</div>

		  		<div class="current-rubric" v-else>
		  			<div class="rubric" id="rubric">
						<h3> Edit Rubric</h3>
						<el-input class="rubric-title" v-model="currentRubric.title" placeholder="Rubric Title"></el-input>
						<div v-for="item in currentRubric.items">
							<el-input class="rubric-content" placeholder="Rubric Content" v-model="item.name" v-bind:value="item.name"></el-input>
							<el-input type="number" class="rubric-percent"  :min="1" :max="100" v-model="item.percent" v-bind:value="item.percent"></el-input>
							<el-button type="danger" class="remove-content" @click="removeSingleContent(item)">Remove</el-button>
						</div>
						<el-button type="info" class="add-content" @click="addContent()">Add</el-button>
						<hr/>
						<div class="actions">
							 <el-button type="success" @click="updateRubric()">Update</el-button>
						</div>
					</div>
		  		</div>
		  	</el-col>

		</el-row>

	</div>

</template>

<script>
import axios from 'axios';

	export default{
		name: 'rubriclist',
		data(){
			return{
				isEditRubric:false,
				rubriclist:[],
				currentRubric:{
					'rubricId':'',
					'title':'',
					'items':[
						
					]
				}
			}
		},
		created() {
			let temp = this;
			axios({
				    method:'get',
				    url:'http://localhost/project/VueRubricAPI/rubricList.php',
				    headers: {
				        'Content-Type': 'application/x-www-form-urlencoded',
				    }
				}).then(function(response){
					// console.log(response);
					temp.rubriclist=response.data
				    // return response.data;
				}).catch(function (error) {
					temp.$message({
		  				message:"Network Error!",
		  				type:'error',
		  				duration:1500
			  		});
				});

		},
		methods:{
			calculateTotal(){
				let total = 0;
				if (this.currentRubric.items) {
					this.currentRubric.items.forEach((element)=>{
						total +=element.percent;
					});
				}
				return total;
			},
			removeSingleContent(rubric){
				this.currentRubric.items=this.currentRubric.items.filter(o=>o.name != rubric.name);
			},
			addContent:function(){
				let canAdd=false;
				let total = this.calculateTotal();
				let score = 0;
				if (total < 100) { 
					score = 100 - total;
					canAdd = true;
				}
				if (canAdd) {
					let temp = 	{'name':'New Item','percent':score};
					this.currentRubric.items.push(temp);
				}else{
					this.$message({
		  				message:"Oooop！Pecentage is already 100%!",
		  				type:'error',
		  				duration:1500
		  			});
				}
			},
			updateRubric(){
				this.$message({
		  				message:"Bravo！Update!",
		  				type:'info',
		  				duration:1500
		  		});
				this.isEditRubric=false;

			},
			editCurrentRubric(){
				this.isEditRubric=true;
			},
			removeCurrentRubric(rubricId){
				this.rubriclist=this.rubriclist.filter(o=>o.rubricId != rubricId);
				this.currentRubric=[];
			},

			selectRubric(rubricId,rubricTitle){
				// here to get rubirc from db
				let temp = this;
				axios({
					    method:'post',
					    url:'http://localhost/project/VueRubricAPI/getRulesByRubricid.php',
					    data:{
					    	rid:rubricId
					    },
					    headers: {
					        'Content-Type': 'application/x-www-form-urlencoded',
					    }
					}).then(function(response){
						console.log(response);
						temp.currentRubric.title = rubricTitle;
						temp.currentRubric.rubricId=rubricId;
						temp.currentRubric.items=response.data;

					    // return response.data;
					}).catch(function (error) {
						temp.$message({
			  				message:"Network Error!",
			  				type:'error',
			  				duration:1500
				  		});
					});
				// switch(rubricId){
				// 	case 1:
				// 		this.currentRubric =  {
				// 			'rubricId':1,
				// 			'title':'C programming',
				// 			'items':[
				// 				{'name':'assignment','percent':20},
				// 				{'name':'test','percent':20},
				// 				{'name':'project','percent':60}
				// 			]
				// 		};
				// 		break;
				// 	case 2:
				// 		this.currentRubric =  {
				// 			'rubricId':2,
				// 			'title':'Java programming',
				// 			'items':[
				// 				{'name':'assignment','percent':20},
				// 				{'name':'exam','percent':20},
				// 				{'name':'project','percent':60}
				// 			]
				// 		};
				// 		break;
				// 	case 3:
				// 		this.currentRubric =  {
				// 			'rubricId':3,
				// 			'title':'Vue programming',
				// 			'items':[
				// 				{'name':'assignment','percent':20},
				// 				{'name':'mid-term','percent':20},
				// 				{'name':'project','percent':60}
				// 			]
				// 		};
				// 	break;
				// 	default:
				// 		case 1:
				// 		this.currentRubric =  {
				// 			'rubricId':1,
				// 			'title':'C programming',
				// 			'items':[
				// 				{'name':'assignment','percent':20},
				// 				{'name':'test','percent':20},
				// 				{'name':'project','percent':60}
				// 			]
				// 		};
				// }
			}
		},
		mounted:function(){
		  	var functionHeight=document.body.clientHeight;
		  	console.log(functionHeight);
		  	document.getElementById('rubric-list').style.height=functionHeight+'px';
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.current-rubric{
	margin: 10px 10px;
}

.rubric-list ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
 		line-height: 1.5em;

	}

.rubric-list li {
	/*float:left;*/
	display: block; 
	text-align: left;
		/*display: inline-block;*/
	margin: 10px 10px;
    /*border-bottom:solid 1px #ccc; */
}
.actions{
	float:left;
	margin: 30px 0px;
}

#rubric-list{
 	border-right: solid 1px #C0CCDA;

}

.rubric-title{
	margin: 10px 10px;
	float: left;
	width: 80%;
}
.rubric-content, .rubric-percent{
	margin: 10px 10px;
	float: left;
	width: 30%;
}
.add-content{
	float:left;
	margin: 10px 10px;
}
.remove-content{
	float:left;
	margin: 10px 10px;
}
.actions{
	clear: both;
	float:left;
	margin: 20px 10px;
}
hr{
	clear: both;
}
</style>